<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    body {background:black; text-align:center;}
    #c1 {background:white;}
    </style>
    <script src="jquery.js" charset="utf-8"></script>
    <script>
    window.onload=function (){
      let oC=document.getElementById('c1');
      let gd=oC.getContext('2d');
      let W=oC.width,H=oC.height;

      let oImg=new Image();
      oImg.src='http://localhost:8080/2.jpg';

      oImg.onload=function (){
        gd.drawImage(oImg, 0, 0);

        let imageData=gd.getImageData(0, 0, W, H);
        let data=imageData.data;

        //黄=>扔掉蓝色
        for(let r=0;r<H;r++){
          for(let c=0;c<W;c++){
            //(r*W+c)*4+0       =>    r
            //(r*W+c)*4+1       =>    g
            //(r*W+c)*4+2       =>    b
            //(r*W+c)*4+3       =>    a
            data[(r*W+c)*4+0]=data[(r*W+c)*4+1]=data[(r*W+c)*4+2]=
            1.0*(data[(r*W+c)*4+0]+data[(r*W+c)*4+1]+data[(r*W+c)*4+2])/3;
          }
        }

        //
        gd.putImageData(imageData, 0, 0);
      };

      //
      let oBtn=document.getElementById('btn1');

      oBtn.onclick=function (){
        let str=oC.toDataURL();

        $.ajax({
          url: 'http://localhost:8080/upload_base64',
          type: 'post',
          data: str,
          success(str){
            console.log(str);
          },
          error(){
            console.log('有错');
          }
        });
      };
    };
    </script>
  </head>
  <body>
    <input type="button" value="发给服务器" id="btn1"><br>
    <canvas id="c1" width="750" height="498"></canvas>
  </body>
</html>
